<template>
    <div>
        <vxe-grid 
        
        resizable
        show-footer
        ref="xGrid"
        :footer-method="footerMethod"
        
        :tree-config="{lazy: true, children: 'children', hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
        :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
        :columns="columns"
        :data="data"
        ></vxe-grid>

        <vxe-bottom>你好</vxe-bottom>
        <vxe-grid v-bind="gridOption">
        <template #toolbar_buttons>
          <vxe-input v-model="searchName" placeholder="搜索"></vxe-input>
          <vxe-button status="primary">搜索</vxe-button>
          <vxe-button @click="tohome()">刷新</vxe-button>
          <vxe-button @click="add()">新增</vxe-button>
          <vxe-button @click="addcol()">保存</vxe-button>
          <vxe-button>导出</vxe-button>
        </template>
        </vxe-grid>
    </div>
</template>

<script>
    export default {
    data () {
        return {
        column:[],
        columns: [
            { type: 'seq', width: '60', fixed: 'left' },
            { field: 'name',width: '300', title: 'Name', editRender: { name: 'NameCon', event }, treeNode: true },
            { field: 'nickname', width: '100',title: 'Nickname' },
            {
            field: 'role',
            title: 'Role',
            type: 'text',
            width: '100',
            cellRender: { name: 'input' }
            },
            {
            field: 'sex',
            title: 'Sex',
            width: '100',
            cellRender: { name: 'DICT', props: { code: 'SEX_LIST' } }
            },
            { field: 'describe', width: '200',title: 'Describe', showOverflow: true }
        ],
        data: [],
        enterType :{
            1: { homeEntry: 'HOME页面' },
            2: { liveEntry: '直播节目',  replayEntry: '回看节目' },
            3: { vodCategoryEntry: '栏目', vodProgramEntry: '栏目列表', vodDetailEntry: '节目集' }
        },

        confirm : { confirmStatus: '已确认', unconfirmed: '未确认' },
        slot : {
            1: ['totalErrors', 'totalCount', 'entryType'],
            2: ['elementErrors', 'totalCount'],
            3: ['totalCount']
        },
        name:"entryType",
        gridOption : {
            size: 'mini',
            border: true,
            align: "center",
            columnConfig: {
                resizable: true
            },
            toolbarConfig: {
                custom: true,
                slots: {
                  buttons: 'toolbar_buttons'
                }
              },
            columns: [
                { type: 'seq', width: 50 },
                { field: 'name', title: 'name' },
                { field: 'sex', title: 'sex', showHeaderOverflow: true },
                { field: 'address', title: 'Address', showOverflow: true },
                { field: 'nickname', title: 'nickname', showOverflow: true },
                { field: 'id', title: 'id', showOverflow: true }
            ],
            printConfig: {
                columns: []
            },
            data: [
                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
                { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
                { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
                { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
              ]
        }
        }

    },
  created () {
    this.findList()
  },
  methods: {
    add(){
        this.gridOption.data.forEach(item=>{
            item.id += 1
        })
    },
    addcol(){
        // if()
        
        if(this.gridOption.columns.filter(item=> item.field == "nickname").length!=0){
            console.log(1111)
            this.gridOption.columns = []
        }else{
            console.log(this.column)
            this.column.pop()
            this.gridOption.columns = this.column
        }
    },
    tohome(){
        this.$router.push({path: "/" });
    },
    changeData () {
      const xTable = this.$refs.xGrid.tableData
      console.log(xTable)
      for (let i = 0; i < xTable.length; i++) {
        // xTable[i].name = '{"name":"aaaaa"}'
        xTable[i].name = 'name1'
        if (xTable[i].children && xTable[i].children.length) {
          for (let j = 0; j < xTable[i].children.length; j++) {
            // xTable[i].children[j].name = '{"name":"bbbb"}'
            xTable[i].children[j].name = 'bbb'
            // xTable[i].children[j] = []
          }
          // xTable[i].children = []
        }
      }
      // this.$refs.xGrid.clearTreeExpand()
      // this.$refs.xGrid.setTreeExpand(xTable[0], true)
      console.log(xTable)
    },
    footerMethod () {
    //   console.log(1212)
      return this.footerData
    },
    findList () {
        this.column = this.gridOption.columns
      // const _this = this
      this.data = [
        {
          //         // name: 'name1',
          name: '{"name":"children"}',
          nickname: 'T1',
          role: '前端',
          sex: '1',
          age: 22,
          status: '1',
          describe: 'Address abc123',
          hasChild: true
        },
        {
          name: '{"name":"children"}',
          // name: 'name-children',
          nickname: 'Test1-1',
          role: '去掉',
          sex: '22',
          age: '0',
          status: '2',
          describe: 'Address rttry',
          hasChild: false
        },
        {
          name: '{"name":"children"}',
          // name: 'name-children',
          nickname: 'Test1-2',
          role: '测试',
          sex: '1',
          age: '26',
          status: '3',
          describe: 'Address xxxxx',
          hasChild: true
        }
      ]
      const allColumn = this.columns
    //   console.log(this.data)
      this.footerData = [
        allColumn.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '平均'
          }
          return columnIndex
        }),
        allColumn.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '和值'
          }
          return columnIndex
        })
      ]
    },
    loadChildrenMethod ({ row }) {
      // 模拟后台
      return new Promise(resolve => {
        setTimeout(() => {
          const childs = [
            { name: 'name-children', nickname: 'Test1-1', role: '去掉', sex: '22', age: '0', status: '2', describe: 'Address rttry' },
            { name: 'name-children', nickname: 'Test1-2', role: '测试', sex: '1', age: 26, status: '3', describe: 'Address xxxxx' }
          ]
          const rowChildren = {
            name: row.name, nickname: row.nickname, role: row.role, sex: row.sex, age: row.age
          }
          childs.push(rowChildren)
          resolve(childs)
        }, 300)
      })
    },
    linkEvent ({ row }) {
      console.log(row.name)
    }
  }
}
</script>

<style>
.progress {
  height: 10px;
  background: #ebebeb;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 10px;
}
.progress > span {
  position: relative;
  float: left;
  margin: 0 -1px;
  min-width: 30px;
  height: 10px;
  line-height: 16px;
  text-align: right;
  background: #cccccc;
  border: 1px solid;
  border-color: #bfbfbf #b3b3b3 #9e9e9e;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: -moz-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: -o-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: linear-gradient(
    to bottom,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress .orange {
  background: #fe8e01;
  border-color: #fe8e02 #fe8e02 #bf6b02;
  background-image: -webkit-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: -moz-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: -o-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: linear-gradient(
    to bottom,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
}
</style>